<div class="container-fluid">
    <div class="row ikg-row">
        <div class="col-sm-12 ikg-col">
            <div class="panel panel-default ikg-panel">
                <div class="panel-body">
                    <div class="col-lg-4">
                        <div class="input-group">
                            <label class="input-group-addon ikg-font-12">角色名称:</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <button type="button" id="btn_query" class="btn btn-success btn-sm"
                                data-bind="click:fnSearch">
                            <i class="fa fa-search fa-lg"></i><span class="hidden-xs hidden-sm"> 查询</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 工具栏 -->
    <div class="row ikg-row">
        <div class="col-sm-12 ikg-col">
            <div id="toolbar" class="btn-group">
                <button type="button" class="btn btn-success btn-sm" data-bind="click:fnAdd">
                    <i class="fa fa-plus fa-lg" aria-hidden="true"></i><span class="hidden-sm hidden-xs"> 新增</span>
                </button>
                <button type="button" class="btn btn-success btn-sm" data-bind="click:fnRemove">
                    <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span class="hidden-sm hidden-xs"> 删除</span>
                </button>
                <button type="button" class="btn btn-success btn-sm" data-bind="click:fnEdit">
                    <i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i><span
                        class="hidden-sm hidden-xs"> 编辑</span>
                </button>
                <button type="button" class="btn btn-success btn-sm" data-bind="click:fnView">
                    <i class="fa fa-file-text fa-lg" aria-hidden="true"></i><span class="hidden-sm hidden-xs"> 查看</span>
                </button>
                <div class="btn-group">
                    <button type="button" class="btn btn-success btn-sm">授权管理</button>
                    <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:void(0)" data-bind="click:fnGrantMenu">
                                <i class="fa fa-outdent fa-fw" aria-hidden="true"></i><span
                                    class="hidden-xs"> 菜单授权</span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" data-bind="click:fnGrantUser">
                                <i class="fa fa-user fa-fw" aria-hidden="true"></i><span class="hidden-xs"> 用户授权</span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" data-bind="click:fnGrantPerm">
                                <i class="fa fa-cubes fa-fw" aria-hidden="true"></i><span class="hidden-xs"> 权限授权</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 列表区域 -->
    <div class="row ikg-row">
        <div class="col-sm-12 ikg-col table-responsive">
            <table data-bind="tableView:tableViewModel" class="table text-nowrap"></table>
        </div>
    </div>
</div>
<div id="roleDialog" class="modal hide" tabindex="-1" role="dialog"
     data-bind="template:{name:'roleModalTemplate',data:roleViewModel},ikgModal:{ backdrop: 'static', keyboard: false, show: modalVisible }"></div>
<div id="grantMenuDialog" class="modal hide" tabindex="-1" role="dialog"
     data-bind="template:{name:'grantMenuModalTemplate',data:grantMenuViewModel},ikgModal:{ backdrop: 'static', keyboard: false, show: grantmenuModalVisible },css:{display:grantmenuModalVisible?'block':'none'}"></div>
<div id="grantUserDialog" class="modal hide" tabindex="-1" role="dialog"
     data-bind="template:{name:'grantUserModalTemplate',data:grantUserViewModel},ikgModal:{ backdrop: 'static', keyboard: false, show: grantUserModalVisible },css:{display:grantUserModalVisible?'block':'none'}"></div>
<div id="grantPermDialog" class="modal hide" tabindex="-1" role="dialog"
     data-bind="template:{name:'grantPermModalTemplate',data:grantPermViewModel},ikgModal:{ backdrop: 'static', keyboard: false, show: grantPermModalVisible },css:{display:grantPermModalVisible?'block':'none'}"></div>
<script type="text/html" id="roleModalTemplate">
    <div class="modal-dialog" style="width: 400px" role="document">
        <div class="modal-content">
            <div class="modal-header ikg-modal-header" id="modalHeader">
                <button type="button" class="close ikg-close" data-bind="click: close">&times;</button>
                <span class="modal-title ikg-modal-title" data-bind="text:title"></span>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="detailForm" autocomplete="off">
                    <div class="form-group">
                        <label for="roleCode" class="col-sm-3 control-label">角色编码:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="roleCode" id="roleCode" placeholder="*,必填"
                                   data-bind="value:roleCode">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="roleName" class="col-sm-3 control-label">角色名称:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="roleName" id="roleName" placeholder="*,必填"
                                   data-bind="value:roleName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="defuri" class="col-sm-3 control-label">默认首页:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="defUri" id="defUri"
                                   data-bind="value:defUri">
                        </div>
                    </div>
                    <div style="display:none">
                        <input class="text" data-bind="value:roleId">
                        <input type="text" data-bind="value:editStatus">
                        <input type="text" data-bind="value:recordStatus">
                    </div>
                </form>
            </div>
            <div class="modal-footer" id="modalFooter">
                <button type="button" class="btn btn-success ikg-btn-12" data-bind="click:save,visible:enabled">
                    <i class="fa fa-save fa-lg"></i> 保存
                </button>
                <button type="button" class="btn btn-default ikg-btn-12" data-bind="click:close">
                    <i class="fa fa-close fa-lg"></i> 关闭
                </button>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="grantMenuModalTemplate">
    <div class="modal-dialog" style="width: 360px;" role="document">
        <div class="modal-content">
            <div class="modal-header ikg-modal-header">
                <button type="button" class="close ikg-close" data-bind="click: close">&times;</button>
                <span class="modal-title ikg-modal-title" data-bind="text:title"></span>
            </div>
            <div class="modal-body ikg-dialog-poup-480">
                <!--<div data-bind="jsTreeView:treeViewModel"></div>-->
                <div id="grantMenuTree">
                    <div class="loading">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success ikg-btn-12" data-bind="click:distribute"><i
                        class="fa fa-check fa-lg"></i> 分配
                </button>
                <button type="button" class="btn btn-default ikg-btn-12" data-bind="click:close"><i
                        class="fa fa-close fa-lg"></i> 关闭
                </button>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="grantUserModalTemplate">
    <div class="modal-dialog" style="width: 360px;" role="document">
        <div class="modal-content">
            <div class="modal-header ikg-modal-header">
                <button type="button" class="close ikg-close" data-bind="click: close">&times;</button>
                <span class="modal-title ikg-modal-title" data-bind="text:title"></span>
            </div>
            <div class="modal-body ikg-dialog-poup-480">
                <!--<table data-bind="tableView:tableViewModel"></table>-->
                <div id="grantUserTree">
                    <div class="loading">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success ikg-btn-12" data-bind="click:distribute">
                    <i class="fa fa-check fa-lg"></i> 分配
                </button>
                <button type="button" class="btn btn-default ikg-btn-12" data-bind="click:close">
                    <i class="fa fa-close fa-lg"></i> 关闭
                </button>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="grantPermModalTemplate">
    <div class="modal-dialog" style="width: 360px;" role="document">
        <div class="modal-content">
            <div class="modal-header ikg-modal-header">
                <button type="button" class="close ikg-close" data-bind="click: close">&times;</button>
                <span class="modal-title ikg-modal-title" data-bind="text:title"></span>
            </div>
            <div class="modal-body ikg-dialog-poup-480">
                <div id="grantPermTree">
                    <div class="loading">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success ikg-btn-12" data-bind="click:distribute">
                    <i class="fa fa-check fa-lg"></i> 分配
                </button>
                <button type="button" class="btn btn-default ikg-btn-12" data-bind="click:close">
                    <i class="fa fa-close fa-lg"></i> 关闭
                </button>
            </div>
        </div>
    </div>
</script>